import React from 'react'
import { Result, List, Button, WhiteSpace, Modal } from 'antd-mobile'
import { connect } from 'react-redux'
import browserCookie from 'browser-cookies'
import { userReset } from '@/redux/User.redux'
import { chatReset } from '@/redux/Chat.redux'
import { preyReset } from '@/redux/Prey.redux'
import styles from './index.scss'

const Item = List.Item
const Brief = Item.Brief
const alert = Modal.alert

@connect(
    state => state.user,
    { userReset, chatReset, preyReset }
)
class UserCenter extends React.Component{

    constructor(props){
        super(props)
        this.logout = this.logout.bind(this)
    }

    logout(){
        alert('确定注销?', '', [
            { text: '取消', onPress: () => {}, style: 'default' },
            { text: '确定', onPress: () => {
                browserCookie.erase('userId')
                this.props.userReset()
                this.props.chatReset()
                this.props.preyReset()
                this.props.history.replace('/login')
            } },
        ])
    }

    render(){
        const { user } = this.props
        return (
            <div className={styles['userCenter-container']}>
                <Result
                    imgUrl={ user.avatar ? require(`@/assets/images/avatar/${user.avatar}.png`) : require('@/assets/images/navbar/user.png')}
                    title={user.username}
                />
                <List renderHeader={() => '相关信息'}>
                    { user.type === 'boss' && <Item extra={user.company}>公司名称：</Item> }
                    <Item extra={user.title}>{ user.type === 'genius' ? '应聘职位：' : '招聘职位：'}</Item>
                    { user.type === 'boss' && <Item extra={user.money}>职位薪资：</Item> }
                    <Item wrap>
                        { user.type === 'genius' ? '个人简介：' : '职位要求：'}
                        { user.desc && user.desc.split('\n').map((item,index) => (
                            <Brief key={index}>{item}</Brief>
                        ))}
                    </Item>
                </List>
                <WhiteSpace/>
                <Button type="primary" onClick={this.logout}>注销</Button>
            </div>
        )
    }
}

export default UserCenter